<template>
	<view class="banner-manage">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<input class="search-input" v-model="searchKeyword" placeholder="搜索轮播图标题" @input="handleSearch" />
		</view>
		
		<!-- 轮播图列表 -->
		<scroll-view class="banner-list" scroll-y @scrolltolower="loadMore">
			<view v-if="bannerList.length > 0">
				<view class="banner-item" v-for="(item, index) in bannerList" :key="index">
					<image class="banner-image" :src="item.imageUrl" mode="aspectFill"></image>
					<view class="banner-info">
						<text class="banner-title">{{item.title}}</text>
						<text class="banner-link">{{item.link}}</text>
					</view>
					<view class="banner-actions">
						<view class="action-btn edit" @click="editBanner(item)">编辑</view>
						<view class="action-btn delete" @click="deleteBanner(item)">删除</view>
					</view>
				</view>
			</view>
			<view v-else class="empty-tip">
				<text>暂无轮播图数据</text>
			
			</view>
		</scroll-view>
		
		<!-- 添加按钮 -->
		<view class="add-btn" @click="addBanner">
			<text class="iconfont icon-plus"></text>
			<text>添加轮播图</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchKeyword: '', // 搜索关键词
			bannerList: [], // 轮播图列表
			page: 1, // 当前页码
			pageSize: 10, // 每页数量
			hasMore: true, // 是否还有更多数据
			isLoading: false // 是否正在加载
		}
	},
	onLoad() {
		this.loadBannerList()
	},
	methods: {
		// 初始化数据库
		async initDatabase() {
			try {
				uni.showLoading({
					title: '初始化中...'
				})
				
				const res = await uniCloud.callFunction({
					name: 'initBanners'
				})
				
				if (res.result.code === 0) {
					uni.showToast({
						title: '初始化成功',
						icon: 'success'
					})
					// 重新加载列表
					this.loadBannerList(true)
				} else {
					uni.showToast({
						title: res.result.msg || '初始化失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('初始化数据库失败', error)
				uni.showToast({
					title: '初始化失败',
					icon: 'none'
				})
			} finally {
				uni.hideLoading()
			}
		},
		
		// 加载轮播图列表
		async loadBannerList(isRefresh = false) {
			if (this.isLoading) return
			
			try {
				this.isLoading = true
				if (isRefresh) {
					this.page = 1
					this.hasMore = true
				}
				
				uni.showLoading({
					title: '加载中...'
				})
				
				const res = await uniCloud.callFunction({
					name: 'getBannerList',
					data: {
						page: this.page,
						pageSize: this.pageSize,
						keyword: this.searchKeyword
					}
				})
				
				if (res.result.code === 0) {
					const { list, total } = res.result.data
					
					if (isRefresh) {
						this.bannerList = list
					} else {
						this.bannerList = [...this.bannerList, ...list]
					}
					
					this.hasMore = this.bannerList.length < total
					this.page++
				} else {
					uni.showToast({
						title: res.result.msg || '加载失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('加载轮播图列表失败', error)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			} finally {
				this.isLoading = false
				uni.hideLoading()
			}
		},
		
		// 搜索处理
		handleSearch() {
			// 防抖处理
			clearTimeout(this.searchTimer)
			this.searchTimer = setTimeout(() => {
				this.loadBannerList(true)
			}, 500)
		},
		
		// 加载更多
		loadMore() {
			if (this.hasMore && !this.isLoading) {
				this.loadBannerList()
			}
		},
		
		// 添加轮播图
		addBanner() {
			uni.navigateTo({
				url: '/pages/admin/banner/edit'
			})
		},
		
		// 编辑轮播图
		editBanner(banner) {
			uni.navigateTo({
				url: `/pages/admin/banner/edit?id=${banner._id}`
			})
		},
		
		// 删除轮播图
		deleteBanner(banner) {
			uni.showModal({
				title: '提示',
				content: '确定要删除这个轮播图吗？',
				success: async (res) => {
					if (res.confirm) {
						try {
							uni.showLoading({
								title: '删除中...'
							})
							
							const res = await uniCloud.callFunction({
								name: 'deleteBanner',
								data: {
									bannerId: banner._id
								}
							})
							
							if (res.result.code === 0) {
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								})
								// 重新加载列表
								this.loadBannerList(true)
							} else {
								uni.showToast({
									title: res.result.msg || '删除失败',
									icon: 'none'
								})
							}
						} catch (error) {
							console.error('删除轮播图失败', error)
							uni.showToast({
								title: '删除失败',
								icon: 'none'
							})
						} finally {
							uni.hideLoading()
						}
					}
				}
			})
		}
	}
}
</script>

<style>
.banner-manage {
	min-height: 100vh;
	background-color: #f8f9fc;
	padding-bottom: 120rpx;
}

/* 搜索栏样式 */
.search-bar {
	padding: 20rpx;
	background-color: #fff;
	position: sticky;
	top: 0;
	z-index: 1;
}

.search-input {
	width: 100%;
	height: 80rpx;
	background-color: #f5f5f5;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
}

/* 轮播图列表样式 */
.banner-list {
	height: calc(100vh - 200rpx);
	padding: 20rpx;
}

.banner-item {
	background-color: #fff;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
}

.banner-image {
	width: 100%;
	height: 300rpx;
}

.banner-info {
	padding: 20rpx;
}

.banner-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
}

.banner-link {
	font-size: 26rpx;
	color: #666;
	display: block;
}

.banner-actions {
	display: flex;
	padding: 20rpx;
	border-top: 1rpx solid #f5f5f5;
}

.action-btn {
	flex: 1;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	border-radius: 8rpx;
	font-size: 28rpx;
	margin: 0 10rpx;
}

.action-btn.edit {
	background-color: #4a6ee0;
	color: #fff;
}

.action-btn.delete {
	background-color: #ff4d4f;
	color: #fff;
}

/* 空状态提示 */
.empty-tip {
	text-align: center;
	padding: 100rpx 0;
	color: #999;
	font-size: 28rpx;
}

/* 添加按钮 */
.add-btn {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	background-color: #4a6ee0;
	color: #fff;
	font-size: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.add-btn .iconfont {
	font-size: 40rpx;
	margin-right: 10rpx;
}

/* 图标字体 */
@font-face {
	font-family: "iconfont";
	src: url('//at.alicdn.com/t/font_3456789_abcdef.woff2') format('woff2');
}

.iconfont {
	font-family: "iconfont" !important;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-plus:before {
	content: "\e767";
}

.init-btn {
	margin-top: 30rpx;
	width: 300rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background-color: #4a6ee0;
	color: #fff;
	font-size: 28rpx;
	border-radius: 8rpx;
	margin-left: auto;
	margin-right: auto;
}
</style> 